<template>

<div style="height:100%; " class="topview-hall full row center">

    <AnimBgStreak ref="refBg"></AnimBgStreak>

    <div style="width: 300px; height:100%; margin-right: 20px; padding-top: 50px">
        
        <n-card style="" hoverable>
            <ConnectionPanel></ConnectionPanel>
        </n-card>

        <HostMonitor ref="refMonitor" style="margin-top: 20px" />
        
        <div style="margin-top: 20px" class="row gap10 item-center">
            <n-button type="info" @click="bus.emit('topview.enter()','projection')">
                <svg style="margin-right:5px" viewBox="0 0 1024 1024" width="16" height="16"><path d="M170.666667 347.861333V213.333333h682.666666v597.333334h-219.861333c4.266667 27.818667 6.528 56.32 6.528 85.333333h256a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667H128a42.666667 42.666667 0 0 0-42.666667 42.666667v170.666666c29.013333 0 57.514667 2.218667 85.333334 6.528zM85.333333 768a128 128 0 0 1 128 128H85.333333v-128z" fill="#ffffff" p-id="7430"></path><path d="M85.333333 426.666667c259.2 0 469.333333 210.133333 469.333334 469.333333h-85.333334a384 384 0 0 0-384-384v-85.333333z" fill="#ffffff" p-id="7431"></path><path d="M85.333333 597.333333a298.666667 298.666667 0 0 1 298.666667 298.666667H298.666667a213.333333 213.333333 0 0 0-213.333334-213.333333v-85.333334z" fill="#ffffff"></path></svg>
                投屏
            </n-button>
            <n-button @click="bus.emit('topview.enter()','firmware')">固件升级</n-button>
            <n-button @click="bus.emit('terminal.popup()')">
                终端
            </n-button>
            <span class="grow"></span>
            <span class="item-end">V{{version}}</span>
        </div>
    
    </div>

    <!-- <div class="column" style="width: 500px; margin-left: 20px; padding-top: 50px; padding-bottom: 50px">

        <n-card class="grow" title="模型">
            <template #header-extra>
                <n-button @click="refreshAppList" :disabled="!conn.isConnected" quaternary>
                    <n-icon><Refresh /></n-icon>
                </n-button>
                <n-button @click="refAppCreator.popup()" secondary type="success">
                    <n-icon><Plus /></n-icon> 新建
                </n-button>
            </template>

            <ul>
                <li v-for="app in lstApps" class="row">
                    <span class="grow">{{app.title}}</span>
                    <div>
                        <n-button circle @click="openApp(app)" size="small">
                            <n-icon><Edit16Regular /></n-icon>
                        </n-button>
                        <n-button @click="deleteApp(app.local)" size="small" type="text" quaternary>
                            <n-icon><DeleteDismiss24Regular /></n-icon>
                        </n-button>
                    </div>
                </li>
            </ul>
        </n-card>
    

    
    </div> -->

    
    <CreateNewApp ref="refAppCreator"></CreateNewApp>

</div>

</template>

<style>
.topview-hall .n-card {
    /* background-color: #ffffff11; */
}
</style>

<script setup lang="ts">
import {bus} from "@beshell/events-ts/bus"
import {conn} from "@beshell/conn-ts/Connection"
import {ref, reactive, onMounted, Ref} from 'vue'
// import CreateNewApp from "../workspace/CreateNewApp.vue"
// import ConnectionPanel from '../connection/ConnectionPanel.vue'
import AnimBgStreak from "./AnimBgStreak.vue"
import HostMonitor from "./HostMonitor.vue"
import { AppModel } from "../../model/AppModel";
import { Plus, Refresh } from "@vicons/tabler";
import { Edit16Regular, DeleteDismiss24Regular } from "@vicons/fluent";

import {version} from '../../version.js'

const refAppCreator: any = ref(null) as unknown as Ref<HTMLElement>
const refBg: any = ref(null) as unknown as Ref<HTMLElement>
const refMonitor: any = ref(null) as unknown as Ref<typeof HostMonitor>

const lstApps: any[] = reactive([
    {
        mockup: true ,
        hostPart: 'BeVision' ,
        title: '演示模型 BeVision' ,
    }
])

async function refreshAppList() {
    if(!conn.isConnected) {
        return
    }
    lstApps.length = 0
    let lst: any[] = await conn.console.call("beconsoled.loadAppLib()")
    console.log(lst)
    if(lst) {
        lstApps.push( ... lst )
    }

    else {
        lstApps.push({
            mockup: true ,
            hostPart: 'BeVision' ,
            title: '演示模型 BeVision' ,
        })
    }
    

    // 自动打开
    setTimeout(()=>{
        if(lstApps.length) {
            // bus.emit('workspace.open()', lstApps[0].local)
        }
    }, 200)
}


onMounted(()=>{
    refBg.value.start()
})

function deleteApp(path: string) {}

function openApp(app:any) {
    if(app.mockup) {
        let model = createMockupModel(app.hostPart, app.title)
        bus.emit('workspace.load()', model)
    }
    else {
        bus.emit('workspace.open()', app.local)
    }
}

conn.on("status", (status:string)=>{
    if(status=='connected') {
        setTimeout(refreshAppList, 200)
    }
})

bus.on("app.new", refreshAppList)

function createMockupModel(hostPart='BeVision', title="演示模型 BeVision") {
    let model = new AppModel()
    model.addPart(hostPart)
    model.pkgmeta.title = title
    model.bMockup = true
    return model
}

function enter() {
    refBg.value.start()
    refMonitor.value.watch()
}
function leave() {
    refBg.value.stop()
    refMonitor.value.unwatch()
}

defineExpose({enter, leave})


</script>